<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.text.DateFormat"%>
<%@page import="com.wanmait.hotelManage.vo.Register"%>
<%@page import="com.wanmait.hotelManage.vo.Room"%>
<%@page import="com.wanmait.hotelManage.vo.RoomType"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    String path=request.getContextPath();
    List<RoomType>roomtypes=(List<RoomType>)request.getAttribute("roomTypes");
    %>
<jsp:include page="/manage/inc/header.jsp"></jsp:include>
   <jsp:include page="/manage/inc/menu.jsp"></jsp:include>
    <!--/sidebar-->
    <div class="main-wrap">

        <div class="crumb-wrap">
            <div class="crumb-list"><i class="icon-font"></i><a href="<%=path%>/manage/index.jsp">首页</a><span class="crumb-step">&gt;</span><span>现场登记管理</span><input class="btn btn-primary btn6 mr10" id="registerbutton" value="网上登记管理" type="button"></div>
        </div>
        <div class="result-wrap">
            <div class="result-content">
                <form action="<%=path %>/manage/RegisterServlet?action=insertMultiple" method="post" id="myform" name="myform">
                    <table class="insert-tab" width="100%">
                        <tbody>
                        <tr>
                            <th width="120"><i class="require-red">*</i>房间类型：</th>
                            <td>
                                <select name="colId" id="catid" class="required">
                                <%
                                if(roomtypes!=null){
                                	for(int i=0;i<roomtypes.size();i++){
                                		RoomType roomtype=roomtypes.get(i);
                                		%>
                                		<option value="<%=roomtype.getId()%>"><%=roomtype.getTitle() %></option>
                                		<%
                                	}
                                }
                                %>
                                    
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th width="120"><i class="require-red">*</i>房间编号：</th>
                            <td>
                                <select name="number" id="number" class="required">
                                </select>
                            </td>
                        </tr>
                            <tr>
                                <th><i class="require-red">*</i>价钱：</th>
                                <td>
                                    <input class="common-text required" id="title" name="title" size="10" value="" type="text">
                                </td>
                            </tr>
                            <tr id="append1">
                                <th>客人姓名：</th>
                                <td><input class="common-text" name="name" size="10" value="" type="text"><input id="buttonAppend" type=button value="+"></td>
                            </tr>
                            <tr id="append4">
                            <th width="120"><i class="require-red">*</i>性别：</th>
                            <td>
                            <select name="gender" id="gender" class="required">
                              <option>男</option>
                              <option>女</option>
                                </select>
                                </td>
                                </tr>
                                <tr>
                            <th width="120"><i class="require-red">*</i>早餐：</th>
                            <td>
                            <select name="breakfast" id="breakfast" class="required">
                              <option>不需要</option>
                              <option>需要</option>
                                </select>
                                </td>
                                </tr>
                                <tr  id="append2">
                                <th>身份证号：</th>
                                <td><input class="common-text" id="idCard" name="idCard" size="20" value="" type="text"><span id="idCardSpan"> 18位身份证号</span></td></td>
                            </tr>
                            <tr id="append3">
                                <th>电话：</th>
                                <td><input class="common-text" id="telephone" name="telephone" size="20" value="" type="text"><span id="telephoneSpan"> 11位电话</span></td></td>
                            </tr>
                            <tr>
                            
                            <tr>
                            <tr>
                                <th>退房时间：</th>
                                <td><input type="date" id="endTime" name="endTime" class="ui_timepicker" value=""><span id="spanEndTime"> 请选择时间</span></td>
                            </tr>
                            <tr>
                                <th></th>
                                <td>
                                    <input class="btn btn-primary btn6 mr10" id="button" value="提交" type="button">
                                   <!--  <input class="btn btn6" id="aftername" value="下一个" type="button"> -->
                                    <input id="search" class="btn btn6" value="搜索" type="button">
                                </td>
                            </tr>
                        </tbody></table>
                </form>
            </div>
        </div>

    </div>
    <!--/main-->
</div>
<jsp:include page="/manage/inc/footer.jsp"></jsp:include>
<script>
 $(function(){
	 
	//得到当前时间
		var date_now = new Date();
		//得到当前年份
		var year = date_now.getFullYear();
		//得到当前月份
		//注：
		//  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
		//  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
		var month = date_now.getMonth()+1 < 10 ? "0"+(date_now.getMonth()+1) : (date_now.getMonth()+1);
		//得到当前日子（多少号）
		var date1 = date_now.getDate() < 10 ? "0"+date_now.getDate() : date_now.getDate();
		var date2 = date_now.getDate()+1 < 10 ? "0"+(date_now.getDate()+1) : (date_now.getDate()+1);
		//设置input标签的max属性
		$("#startTime").attr("min",year+"-"+month+"-"+date1);
		$("#startTime").val(year+"-"+month+"-"+date1);
		$("#endTime").attr("min",year+"-"+month+"-"+date2);
		$("#endTime").val(year+"-"+month+"-"+date2);
	 
	 
	 $("#search").click(function() {
		 var t=new Date();
		 $.ajax({
			 url:"<%=path%>/manage/RegisterServlet?action=searchRoomType",
			data:{roomTypeId:$("#catid").val(),endTime:$("#endTime").val(),startTime:t},
			success:function(msg){
				$("#number").html(msg);
			}
			
		 })
	})
	 
	 changeRoom();
	changeprice(); 
	$("#button").click(function(){
		var idcard=$("#idCard").val();
		var telephone=$("#telephone").val();
		var endTime=$("#endTime").val();
		if(idcard.length!=18){
			$("#idCardSpan").html("输入错误");
			return;
		}else{
			$("#idCardSpan").html("");
		}
		if(telephone.length!=11){
			$("#telephoneSpan").html("输入错误");
			return;
		}else{
			$("#telephoneSpan").html("");
		}
		if(endTime.length==0){
			$("#spanEndTime").html("时间不能为空");
			return;
		}else{
			$("#spanEndTime").html("");
		}
		$("#myform").submit();
	})
}); 
</script>

<script>
 $(function(){
	$("#catid").change(changeRoom);
}); 
	function changeRoom(){
		var id=$(".required").val();
		$.ajax({
			url:"<%=path%>/manage/RegisterServlet?action=initone",
			data:{id:id},
			success:function(msg){
				$("#number").html(msg);
			}
		})
	};

</script>
<script>
$(function(){
	$("#catid").change(changeprice)
});
function changeprice(){
	var id=$(".required").val();
	$.ajax({
		url:"<%=path%>/manage/RegisterServlet?action=initprice",
		data:{id:id},
		success:function(msg){
			$("#title").val(msg);
		}
	})
}
</script>
<%--  <script>
$(function(){
	$("#aftername").click(function(){
		$("#myform").attr("action","<%=path %>/manage/RegisterServlet?action=afterinsert");
		$("#myform").submit();
		window.location.href="<%=path%>/manage/RegisterServlet?action=afterinsert";
	})
})
</script>  --%>
<%-- <link type="text/css" href="<%=path %>/static/manage/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
     <link type="text/css" href="<%=path %>/static/manage/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
    <script type="text/javascript" src="<%=path %>/static/manage/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="<%=path %>/static/manage/js/jquery-ui-1.8.17.custom.min.js"></script>
	<script type="text/javascript" src="<%=path %>/static/manage/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript" src="<%=path %>/static/manage/js/jquery-ui-timepicker-zh-CN.js"></script>
    <script type="text/javascript">
     $(function () {
        $(".ui_timepicker").datetimepicker({
            //showOn: "button",
            //buttonImage: "./css/images/icon_calendar.gif",
            //buttonImageOnly: true,
             showSecond: true, 
             timeFormat: 'hh:mm:ss', 
             stepHour: 1,
            stepMinute: 1,
            stepSecond: 1 
        })
    }) 
    </script> --%>
    <script>
$(function(){
	$("#registerbutton").click(function(){
		window.location.href="<%=path%>/manage/RegisterServlet?action=online";
	})
})
</script>
<style>
#registerbutton{
margin-left:100px;
}
</style>
<script>
$(function(){
	$("#buttonAppend").click(function(){
		$("#append1").after(
"<tr><th>多个客人姓名：</th><td><input class='common-text' name='name' size='10' value='' type='text'></td></tr>");
 		$("#append2").after(
"<tr><th>多个身份证号：</th><td><input class='common-text' id='idCard' name='idCard' size='20' value='' type='text'><span id='idCardSpan'> 18位身份证号</span></td></td></tr>");
	$("#append3").after(
"<tr><th>多个电话：</th><td><input class='common-text' id='telephone' name='telephone' size='20' value='' type='text'><span id='telephoneSpan'> 11位电话</span></td></td></tr>"); 
	$("#append4").after(
	"<tr><th width='120'><i class='require-red'>*</i>多个性别：</th><td><select name='gender' id='gender' class='required'><option>男</option><option>女</option></select></td></tr>");
	})
})
</script>